<template>
  <el-card class="box-card" shadow="hover" @click="goDetail">
    <div class="content">
      <div class="left">
        <div class="hospital_name">{{ hospitalInfo.hosname }}</div>
        <div class="tip">
          <div class="level">
            <svg
              t="1713598314640"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5131"
              width="16"
              height="16"
            >
              <path
                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                p-id="5132"
                fill="#999999"
              />
            </svg>
            <span>{{hospitalInfo.param.hostypeString}}</span>
          </div>
          <div class="time">
            <svg
              t="1713598526708"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6439"
              width="16"
              height="16"
            >
              <path
                d="M512 1024C229.229714 1024 0 794.733714 0 511.963429 0 229.193143 229.229714-0.036571 512-0.036571 794.770286-0.036571 1024 229.193143 1024 511.963429 1024 794.733714 794.770286 1024 512 1024ZM512 73.142857C269.641143 73.142857 73.142857 269.641143 73.142857 512 73.142857 754.358857 269.641143 950.857143 512 950.857143 754.358857 950.857143 950.857143 754.358857 950.857143 512 950.857143 269.641143 754.358857 73.142857 512 73.142857ZM676.571429 548.571429 493.714286 548.571429C483.620571 548.571429 475.428571 540.379429 475.428571 530.285714L475.428571 493.714286 475.428571 493.677714 475.428571 201.142857C475.428571 191.049143 483.620571 182.857143 493.714286 182.857143L530.285714 182.857143C540.379429 182.857143 548.571429 191.049143 548.571429 201.142857L548.571429 475.392 676.571429 475.392C686.665143 475.392 694.857143 483.584 694.857143 493.677714L694.857143 530.285714C694.857143 540.379429 686.665143 548.571429 676.571429 548.571429Z"
                p-id="6440"
                fill="#999999"
              />
            </svg>
            <span>每天{{hospitalInfo.bookingRule?.releaseTime}}放号</span>
          </div>
        </div>
      </div>
      <div class="right">
        <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" />
      </div>
    </div>
  </el-card>
</template>
    
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps(["hospitalInfo"]);
// 跳转至详情页
const goDetail = () => {
  router.push({
    path: "/hospital/register",
    query: { hoscode: props.hospitalInfo.hoscode }
  });
};
</script>

<style lang="scss" scoped>
::v-deep(.el-card__body) {
  padding: 0;
}
.box-card {
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 98px;
    padding: 0 10px 0 20px;
    cursor: pointer;
    .hospital_name {
      font-weight: 500;
      font-size: 16px;
      align-items: center;
      transition: all 0.2s ease;
      &:hover {
        font-weight: 700;
      }
    }
    .left {
      .tip {
        display: flex;
        justify-content: space-between;
        width: 250px;
        margin-top: 20px;
        color: #999;
        font-size: 14px;
        div {
          display: flex;
          align-items: center;
          span {
            margin-left: 5px;
          }
        }
      }
    }
    .right {
      img {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin-left: 12px;
        transition: all 0.2s linear;
      }
    }
  }
}
</style>
